jQuery HTML5 media player
"Tears of Steel" was realized with crowd-funding by users of the open source 3D creation tool Blender. Target was to improve and test a complete open and free pipeline for visual effects in film - and to make a compelling sci-fi film in Amsterdam, the Netherlands.
(CC) Blender Foundation - http://www.tearsofsteel.org
You can download the latest version from GitHub.
Acorn Media Player is a HTML5 media player with a focus on accessibility and customization.
Articles describing it's development:
Acorn Media Player is built with accessibility in mind.
It provides full keyboard access using standard tab-based navigation, screen-reader (and other AT) support, accessible themes, and other accessibility tweaks.
This is no native support for closed captioning on HTML5 <video> yet, but that shouldn't stop you from providing them.
It supports external SRT files just like desktop media players.
Along with closed captions support, the player provides a dynamic transcript generated from the selected captions.
Other notable features include:
Properly mark-up your videos, and make sure they work, without the player. It's also a good time to consider fallbacks.
Since this is a jQuery plugin, you'll need to include jQuery. You can include it from Google's CDN.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
You don't have to include the whole jQuery UI, you'll only have to include the jQuery UI Slider component. You can create your own custom jQuery UI build on the jQuery UI website.
<script src="/path/to/jquery-ui-custom.js"></script>
You'll need to include one JavaScript file
<script src="/path/to/jquery.acornmediaplayer.js"></script>
and one CSS file
<link href="/path/to/acornmediaplayer.base.css" rel="stylesheet" type="text/css">
The base CSS file you just included does not provide any themes. Themes are located in other external CSS files.
<link href="/path/to/themes/acorn.theme.css" rel="stylesheet" type="text/css">
See the themes included by default in the Themes section.
When you're done including everything, call the plugin on the elements you want using a jQuery selector.
<script>
$(document).ready(function() {
$('video, audio').acornMediaPlayer();
});
</script>
This will initialize the player using the default options. See the available options bellow.
These are the themes included with the player:
| Key | Default value | Description |
|---|---|---|
| theme | 'access' |
Theme to be used by media player. The value is added as an extra class to the gallery wrapper. You can also provide multiple values (just like adding multiple classes to an element). Some themes provide child themes, which build on, or modify the main theme. So, if you want to use 'accesslight', a child theme of 'access' you'll have to use 'access accesslight'. Remember to include the theme. |
| nativeSliders | false |
More of an experimental feature. Whether or not to use <input type="range"> controls instead of jQuery UI sliders, for the seek and volume slider. Can be |
| volumeSlider | 'horizontal' |
The direction of the volume slider, to be used with the jQuery UI Slider. Can be |
| captionsOn | false |
If true, the first caption will be selected by default. Can be |
| tooltipsOn | true |
Show a tooltip for the hovered player control. Can be |
These are the themes included with the player:
Includes child theme accesslight
Includes child theme darkglasssmall
Please report any issues on GitHub. I'm very open to pull-requests.
Acorn Media Player is licensed under the MIT license.
You can use the Webshim Polyfill for supporting older browsers, and other cross-browser goodies. Thanks to aFarkas!
Check the source, it's used on these pages.